<!DOCTYPE html>
<html lang="en">
  <head>
    <title>AudioWorklet Demo</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css" />

    <!-- import the webpage's javascript file -->
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>AudioWorklet Demo</h1>

    <p>
      This page is a demo for the <code>AudioWorklet</code> API, which lets you
      process audio in the background using a worklet.
    </p>

    <button id="toggle">Toggle Sound</button>

    <div class="control-box">
      <div class="control">
        <span class="control-label">
          <label for="osc-gain">Oscillator gain:</label>
        </span>
        <input
          type="range"
          id="osc-gain"
          name="osc-gain"
          min="0.0"
          max="1.0"
          step="0.05"
          value="0.1"
        />
      </div>

      <div class="control">
        <span class="control-label">
          <label for="hiss-gain">Hiss gain:</label>
        </span>
        <input
          type="range"
          id="hiss-gain"
          name="hiss-gain"
          min="0.0"
          max="1.0"
          step="0.05"
          value="0.2"
        />
      </div>
    </div>
  </body>
</html>
